<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<style>
    .el-table .warning-row {
        background: oldlace;
    }

    .el-table .success-row {
        background: #f0f9eb;
    }
</style>
<body>

<!--登录-->
<div id="app">
<!--    <div id="login">-->
<!--        <el-button type="text" @click="dialogLoginVisible = true">立即登录</el-button>-->
<!--    </div>-->

<!--    <el-dialog title="用户登录" :visible.sync="dialogLoginVisible">-->
<!--        <el-form :model="user">-->
<!--            <el-form-item label="账号" :label-width="formLabelWidth">-->
<!--                <el-input v-model="user.accountNum" autocomplete="off"></el-input>-->
<!--            </el-form-item>-->
<!--            <el-form-item label="密码" :label-width="formLabelWidth">-->
<!--                <el-input placeholder="请输入密码" v-model="user.pwd" show-password></el-input>-->
<!--            </el-form-item>-->

<!--        </el-form>-->
<!--        <div slot="footer" class="dialog-footer">-->
<!--            <el-button @click="dialogLoginVisible = false">取 消</el-button>-->
<!--            <el-button type="primary" @click="login">登录</el-button>-->
<!--        </div>-->

<!--        <div id="register">-->
<!--            <el-button type="text" @click="toRegister">没有账户，注册一个</el-button>-->
<!--        </div>-->
<!--    </el-dialog>-->

        <div id="login">
            <el-button type="text" @click="toUpdateUser">修改用户信息</el-button>
        </div>

    <!--    注册账户-->
    <el-dialog title="修改用户信息" :visible.sync="dialogRegisterVisible">
        <el-form :model="user">
            <el-form-item label="用户名" :label-width="formLabelWidth">
                <el-input v-model="user.userName" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="密码" :label-width="formLabelWidth">
                <el-input placeholder="请输入密码" v-model="user.pwd" show-password></el-input>
            </el-form-item>
            <el-form-item label="账号" :label-width="formLabelWidth">
                <el-input v-model="user.accountNum" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="性别" :label-width="formLabelWidth">
                <template>
                    <el-radio v-model="user.sex" label="男">男</el-radio>
                    <el-radio v-model="user.sex" label="女">女</el-radio>
                </template>
            </el-form-item>
            <el-form-item label="年龄" :label-width="formLabelWidth">
                <el-input v-model="user.age" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="身份证号" :label-width="formLabelWidth">
                <el-input v-model="user.idcard" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="手机号" :label-width="formLabelWidth">
                <el-input v-model="user.phoneNum" autocomplete="off"></el-input>
            </el-form-item>

        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogRegisterVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateUser">修改</el-button>
        </div>
    </el-dialog>
    <!--    查看预约信息表格-->
    <div>
        <el-button type="text" @click="selectOrder">查看预约信息</el-button>
    </div>


    <el-dialog title="预约信息" :visible.sync="dialogBookVisible"
    width="100%">
        <el-table :data="registers">
            <el-table-column property="doctorName" label="姓名" width="200"></el-table-column>

            <el-table-column property="price" label="价格"></el-table-column>

            <el-table-column property="orderTime" label="预约时间" width="150"></el-table-column>

            <el-table-column property="relateWay" label="联系方式" width="150"></el-table-column>

            <el-table-column property="date" label="挂号日期" width="150"></el-table-column>

            <el-table-column property="dayOfWeek" label="星期" width="150"></el-table-column>

            <el-table-column property="amorPM" label="上/下午"></el-table-column>

            <el-table-column property="remarks" label="备注信息"></el-table-column>

            <el-table-column property="serialNum" label="序号"></el-table-column>


            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="success"
                            size="mini"
                            @click="deleteOrder(scope.$index, scope.row)">取消预约</el-button>
                    <el-button
                            size="mini"
                            type="danger"
                            @click="handleUpdate(scope.$index, scope.row)">添加备注</el-button>
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>

    <el-dialog title="备注信息" :visible.sync="dialogFormVisible">
        <el-form :model="information">
            <el-form-item label="备注信息" :label-width="formLabelWidth">
                <el-input v-model="information.information" autocomplete="off"></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="updateInfor">确 定</el-button>
        </div>
    </el-dialog>

<!--    查看病例记录-->
    <div>
        <el-button type="text" @click="selectCase">查看病例记录</el-button>
    </div>
    <el-dialog title="病例记录" :visible.sync="dialogCaseVisible"
               width="80%">
        <el-table :data="caserecord">
            <el-table-column property="userName" label="用户姓名" width="200"></el-table-column>

            <el-table-column property="recordTime" label="记录时间"></el-table-column>

            <el-table-column property="therapyCycle" label="治疗周期" width="150"></el-table-column>

            <el-table-column property="checkSituation" label="检查情况" width="150"></el-table-column>

            <el-table-column property="diseaseType" label="疾病类型" width="150"></el-table-column>

            <el-table-column property="medicalAdvice" label="医生建议" width="150"></el-table-column>

            <el-table-column property="doctorName" label="医生姓名"></el-table-column>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            size="mini"
                            @click="handleGrade(scope.$index, scope.row)">评分</el-button>
                </template>
            </el-table-column>


        </el-table>
    </el-dialog>

    <el-dialog title="评分" :visible.sync="dialogRateVisible">
        <el-rate
                v-model="rate"
                show-text>
        </el-rate>

        <div slot="footer" class="dialog-footer">
            <el-button @click="dialogRateVisible = false">取 消</el-button>
            <el-button type="primary" @click="handleRate">确 定</el-button>
        </div>
    </el-dialog>

    <!--    查询表单-->

    <el-form :inline="true" :model="doctor" class="demo-form-inline">
        <el-form-item label="医生">
            <el-input v-model="doctor.doctorName" placeholder="请输入"></el-input>
        </el-form-item>

        <el-form-item label="科室">
            <el-select v-model="doctor.departmentName" clearable placeholder="请选择" >
                <el-option
                        v-for="item in departments"
                        :key="item.departmentID"
                        :label="item.departmentName"
                        :value="item.departmentName">
                </el-option>
            </el-select>
        </el-form-item>

<!--        <el-form-item>-->
<!--            <template>-->
<!--                <div class="block">-->
<!--                    <span class="demonstration">在岗时间</span>-->
<!--                    <el-date-picker-->
<!--                            v-model="value1"-->
<!--                            type="date"-->
<!--                            placeholder="选择日期">-->
<!--                    </el-date-picker>-->
<!--                </div>-->
<!--            </template>-->
<!--        </el-form-item>-->
<!--        <el-form-item label="只看有号">-->
<!--            <el-switch-->
<!--                    v-model="full"-->
<!--                    active-color="#13ce66"-->
<!--                    inactive-color="#ff4949">-->
<!--            </el-switch>-->
<!--        </el-form-item>-->
<!--        <el-form-item>-->
            <el-button type="primary" @click="onSubmit">查询</el-button>
        </el-form-item>
    </el-form>

    <!--    表格-->

    <template>
        <el-table
                :data="doctors"
                style="width: 100%"
                :row-class-name="tableRowClassName">

            <el-table-column
                    prop="doctorNum"
                    label="医生编号"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="doctorName"
                    label="姓名"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="age"
                    label="年龄"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="price"
                    label="价格"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="departmentName"
                    label="科室"
                    width="180">
            </el-table-column>

            <el-table-column
                    prop="sex"
                    label="性别"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="hospital"
                    label="所属医院"
                    width="180">
            </el-table-column>

            <el-table-column label="操作" width="180">
                <template slot-scope="scope">
                    <el-button
                            type="primary"
                            size="mini"
                            @click="handleSit(scope.$index, scope.row)">查看坐诊</el-button>
                    <el-button
                            size="mini"
                            @click="handleRemark(scope.$index, scope.row)">评论</el-button>
                    <el-button
                            size="mini"
                            @click="selectRate(scope.$index, scope.row)">查看评分</el-button>
                </template>
            </el-table-column>
        </el-table>
    </template>

    <el-dialog title="评分" :visible.sync="dialogLookRateVisible">
        <el-rate
                v-model="rate"
                disabled
                show-score
                text-color="#ff9900"
                score-template="{value}">
        </el-rate>

    </el-dialog>

<!--    坐诊信息表-->
    <el-dialog title="预约" :visible.sync="dialogOrderVisible"
    width="80%"
    >
        <el-table
                :data="doctorSits"
                height="250"
                border
                style="width: 100%">
            <el-table-column
                    prop="doctorName"
                    label="医生姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="date"
                    label="日期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="dayOfWeek"
                    label="星期"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="amorPM"
                    label="上/下午"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="remainNum"
                    label="余量"
                    width="180">
            </el-table-column>

            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-button
                            type="success"
                            size="mini"
                            @click="onOrder(scope.$index, scope.row)">预约</el-button>
<!--                    <el-button-->
<!--                            size="mini"-->
<!--                            type="danger"-->
<!--                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>-->
                </template>
            </el-table-column>
        </el-table>
    </el-dialog>



<!--评论表-->
    <el-dialog title="评论" :visible.sync="dialogRemarkVisible">
        <el-table
                :data="remarks"
                height="250"
                border
                style="width: 100%">
            <el-table-column
                    prop="userName"
                    label="姓名"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="content"
                    label="内容"
                    width="180">
            </el-table-column>
            <el-table-column
                    prop="time"
                    label="时间"
                    width="180">
            </el-table-column>

        </el-table>

        <el-form :inline="true" :model="myRemark" class="demo-form-inline">
            <el-form-item label="评论">
                <el-input v-model="myRemark.content" placeholder="评论"></el-input>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onRemark">评论</el-button>
            </el-form-item>
        </el-form>
    </el-dialog>


</div>


<script src="../js/vue.js"></script>
<script src="../element-ui/lib/index.js"></script>
<link rel="stylesheet" href="../element-ui/lib/theme-chalk/index.css">
<script src="../js/axios-0.18.0.js"></script>

<script>

    new Vue({
        el:"#app",

        data() {
            return{
                user:{
                    userID:'',
                    userName:'',
                    pwd:'',
                    accountNum:'',
                    sex:'',
                    age:'',
                    idcard:'',
                    phoneNum:''
                },
                departments: [],
                value: '',
                full:true,
                pickerOptions: {
                    disabledDate(time) {
                        return time.getTime() > Date.now();
                    },
                },
                remarks: [],
                doctorRemark: {},
                doctorSit:{},
                myRemark: {
                    content: '',
                },
                from:{
                    infor:'',
                    registID:''
                },
                doctorSits:[],
                register:{
                    resgistID:'',
                    remarks:'',
                    orderTime:'',
                    price:'',
                    relateWay:'',
                    registTime:'',
                    date:'',
                    amorPM:'',
                    seriaNum:'',
                    userID:'',
                    doctorID:'',
                    userName:'',
                    doctorName:''
                },
                registers:[],

                value1: '',

                doctors: [],
                doctor: {},

                caserecord :[],
                rate:'',
                caseID:'',

                bookInformation:[],

                dialogLoginVisible: false,
                dialogRegisterVisible:false,
                dialogBookVisible: false,
                dialogRemarkVisible: false,
                dialogOrderVisible:false,
                dialogCaseVisible:false,
                dialogFormVisible: false,
                dialogRateVisible:false,
                dialogLookRateVisible:false,

                information: {
                    information: '',
                },
                formLabelWidth: '120px',
                isLogin:"true",
                orderTimes:0

            }
        },
        mounted(){
            this.selectAllDoctor();
            this.selectAllDepart();
            this.selectUser();
        },
        methods: {
            selectUser(){
                axios.post("http://localhost:8080/users/selectUser").then(resp=>{
                    this.user=resp.data;
                    console.log(this.user);
                })
            },
            selectAllDoctor(){
                axios.post("http://localhost:8080/users/selectAllDoctor",this.doctor).then(resp=>{
                    this.doctors = resp.data.data;
                })
            },
            selectAllDepart(){
                axios.post("http://localhost:8080/users/selectAllDep").then(resp=>{
                    this.departments = resp.data;
                })
            },

            toUpdateUser(){
                this.dialogRegisterVisible = true;
                this.selectUser();
            },
            updateUser() {
                axios.post("http://localhost:8080/users/updateUser",this.user).then(resp=>{
                    if(resp.data === 1){
                        this.dialogRegisterVisible = false;
                        this.$message.success("修改成功");
                    }else {
                        this.$message.error("修改失败");
                    }
                })
                console.log(this.user);
            },

            selectOrder() {
                if(this.isLogin === "false"){
                    this.$message.error("请先登录");
                }else{
                    this.dialogBookVisible = true;
                    axios.get("http://localhost:8080/register/selectRegis?userID="+this.user.userID).then(resp=>{
                        this.registers = resp.data;
                        console.log(this.registers);
                    })
                }

            },
            selectCase() {
                if(this.isLogin === "false" ){
                    this.$message.error("请先登录");
                }
                else{
                    this.dialogCaseVisible = true;

                    axios.get("http://localhost:8080/case/selectByuserID").then(resp=>{
                        this.caserecord = resp.data;
                    })

                }

            },

            deleteOrder(index, row){
                console.log(row.registID);

                axios.post("http://localhost:8080/doctorSit/addRemain",row).then(rep=>{
                    if(rep.data === 1){
                        axios.get("http://localhost:8080/register/deleteById?id="+row.registID).then(resp=>{
                            if(resp.data ===1){
                                this.$message.success("取消成功");
                                this.selectOrder();
                            }
                        })

                    }
                })

            },

            handleUpdate(index,row){

                this.information.information = row.remarks;
                this.information.registID = row.registID;
                this.dialogFormVisible = true;
            },
            updateInfor(){
                axios.get("http://localhost:8080/register/updateInfor?remarks="+this.information.information+"&registID="+this.information.registID).then(resp=>{
                    if(resp.data===1){
                        this.$message.success("添加成功");
                        this.selectOrder();
                        this.dialogFormVisible = false;
                    }else{
                        this.$message.error("添加失败");
                    }
                })
            },

            onSubmit() {
                this.selectAllDoctor();
            },

            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },

            handleSit(index, row) {
                if(this.isLogin === "false"){
                    this.$message.error("请先登录");
                }else{
                    this.dialogOrderVisible = true;
                    this.doctorSit = row;
                    axios.get("http://localhost:8080/doctorSit/selectDoctorSit?doctorID="+row.doctorID).then(resp=> {
                        this.doctorSits = resp.data;
                        console.log(this.doctorSits);
                    })
                }

            },


             async onOrder(index, row) {
                this.register.doctorID = this.doctorSit.doctorID;
                this.register.price = this.doctorSit.price;
                this.register.relateWay = this.user.phoneNum;
                this.register.dayOfWeek = row.dayOfWeek;
                this.register.date = row.date;
                this.register.type = '专家号';
                this.register.amorPM = row.amorPM;
                this.register.serialNum = row.allNum - row.remainNum + 1;
                this.register.userID = this.user.userID;
                this.register.remarks = "无";
                this.register.userName = this.user.userName;
                this.register.doctorName = row.doctorName;

                await axios.post("http://localhost:8080/register/timesOrder",this.register).then(resp=>{
                    this.orderTimes = resp.data;

                });

                setTimeout(function (){console.log(this.orderTimes);},3000)


                if(row.remainNum <= 0){
                    this.$message.error("余量不足");
                    return;
                }

                if(this.orderTimes > 0){
                    this.$message.error("你已经预定了");
                    return;
                }
                // console.log(this.register)
                await axios.post("http://localhost:8080/register/addRegis",this.register).then(resp=>{
                    if(resp.data===1){
                        this.$message.success("预约成功");
                    }
                })
                row.remainNum = row.remainNum - 1;
                await axios.post("http://localhost:8080/doctorSit/subRemain",row)

            },


            handleRemark(index, row) {
                // console.log(row);
                this.dialogRemarkVisible = true;
                this.doctorRemark = row;
                axios.get("http://localhost:8080/remarks/selectRemark?x="+this.doctorRemark.doctorID).then(resp=>{
                    this.remarks = resp.data;
                })
            },

            selectRate(index,row){
                axios.get("http://localhost:8080/doctors/selectRate?doctorNum="+row.doctorNum).then(resp=>{
                    if(resp.data === null){
                        this.$message.error("还没有评分")
                    }else{
                        this.rate = resp.data/2;
                        this.dialogLookRateVisible = true;
                    }

                })
            },

            handleRate(){
                axios.get("http://localhost:8080/case/addRate?caseID="+this.caseID+"&rate="+this.rate*2).then(resp=>{
                    if(resp.data === 1){
                        this.$message.success("评分成功");
                        this.dialogRateVisible = false;
                    }
                })
            },

            handleGrade(index, row){

                axios.get("http://localhost:8080/case/isGrade?caseID="+row.caseID).then(resp=>{
                    if(resp.data === 0){
                        this.caseID = row.caseID;
                        this.dialogRateVisible = true;
                    }else{
                        this.$message.error("你已经对该医生评分了")
                    }
                })
            },


            onRemark() {
                if(this.isLogin === "false"){
                    this.$message.error("请先登录");
                }else{

                    var userRemark = {
                        userID :this.user.userID,
                        doctorID:this.doctorRemark.doctorID,
                        content:this.myRemark.content,
                    }

                    axios.post("http://localhost:8080/remarks/addRemark",userRemark).then(resp=>{
                        if(resp.data==="success"){
                            axios.get("http://localhost:8080/remarks/selectRemark?x="+this.doctorRemark.doctorID).then(resp=>{
                                this.remarks = resp.data;
                            })
                            this.myRemark.content="";
                        }
                    })
                }

            },

        }
    })
</script>
</body>
</html>